<template>
  <div>
    <!-- <div>{{defaultSelectedKeys}}</div>
    <div>{{openKeys}}</div> -->
    <div class="logo" @click="log" v-if="collapsed" />
    <div class="logo1" @click="log" v-else />
    <a-menu theme="dark" mode="inline" :openKeys="openKeys"
    @openChange="setopenKeys"
    @select="setdefaultSelectedKeys"
     :selectedKeys="defaultSelectedKeys">
      <template v-for="item in menus">
        <a-menu-item v-if="!item.children" :key="item.name">
          <router-link :to="item.path">
            <a-icon :type="item.meta.icon" v-if="item.meta.icon" />
            <span>{{ item.title || item.meta.title }}</span>
          </router-link>
        </a-menu-item>
        <sub-menu v-else :key="item.name" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>
<script>
import { mapState,mapMutations } from "vuex";
import { getRandomStr } from "@/utils";
import SubMenu from "./SubMenu.vue";
export default {
  components: {
    "sub-menu": SubMenu,
  },
  props: {
    collapsed: {},
  },
  data() {
    return {};
  },
  mounted() {
  
  },
  methods: {
    log() {
      // console.log(this.routers);
      // console.log(this.menus);
      console.log(this.defaultSelectedKeys);
      console.log(this.openKeys);
      
    },
    ...mapMutations(['setopenKeys','setdefaultSelectedKeys'])
    
  },
  computed: {
    menus() {
      return isTrueFilters(this.routers);
      function isTrueFilters(list) {
        var reslist = [];
        list.forEach((val) => {
         
          if (!val.hidden) {
            val.key = getRandomStr(18);
            if (val.children && val.children.length > 0)
              val.children = isTrueFilters(val.children);
            if (val.children&&val.children.length <= 0){
                delete val.children;
            } 

            reslist.push(val);
          }
        });
        return reslist;
      }
    },
    ...mapState({
      routers: (state) => state.user.routers,
      defaultSelectedKeys: (state) => state.app.defaultSelectedKeys,
      openKeys: (state) => state.app.openKeys,
      
    }),
  },
};
</script>

<style lang="less" scoped >
a{
  color:#fff
}
@import "../Main.less";

</style>

